<template>
  <a-modal
    title="修改"
    :maskClosable="false"
    :width="1050"
    placement="right"
    :closable="true"
    @cancel="onClose"
    :visible="pDstTxnAuthCfgEditVisiable"
  >
    <a-tabs v-model="activeKey" small="small">
      <a-tab-pane key="1" tab="交易基本信息">
        <a-form :form="form">
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="通道交易码" v-bind="formItemLayout">
                <a-input :disabled="true" v-decorator="['channelTxn']" />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="交易支持标志" v-bind="formItemLayout">
                <a-select
                  v-decorator="[
                    'supportFlag',
                    { relus: [{ required: true, message: '必填' }] },
                  ]"
                  @change="handleChange"
                >
                  <a-select-option value="Y">支持</a-select-option>
                  <a-select-option value="N">不支持</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="是否支持智能路由" v-bind="formItemLayout">
                <a-radio-group v-decorator="['intelligentRouteFlag']">
                  <a-radio>是</a-radio>
                  <a-radio>否</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="支持账户类型" v-bind="formItemLayout">
                <a-checkbox
                  v-decorator="['supportAcctTypeList']"
                ></a-checkbox> </a-form-item
            ></a-col>
          </a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="交易延迟类型" v-bind="formItemLayout">
                <a-select v-decorator="['txnDelayType']">
                  <a-select-option value="1">实时到账</a-select-option>
                  <a-select-option value="2">普通到账</a-select-option>
                  <a-select-option value="3">24小时到账</a-select-option>
                </a-select>
              </a-form-item></a-col
            >
            <a-col :md="12" :sm="24">
              <a-form-item label="交易最大并发数" v-bind="formItemLayout">
                <a-input
                  v-decorator="[
                    'maxSupportNum',
                    {
                      rules: [
                        { required: true, message: '必填' },
                        { max: 8, message: '不超过8位字符' },
                        { reg: '^[1-9][0-9]{0,7}$', message: '请检查格式' },
                      ],
                    },
                  ]"
                /> </a-form-item
            ></a-col>
          </a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="业务报文登记标识" v-bind="formItemLayout">
                <a-select v-decoractor="['msgRegisterFlag']">
                  <a-select-option value="Y">登记</a-select-option>
                  <a-select-option value="N">不登记</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="验签标志" v-bind="formItemLayout">
                <a-select v-decoractor="['signFlag']">
                  <a-select-option value="Y">验签/MAC</a-select-option>
                  <a-select-option value="N">不验签/MAC</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="转加密标志" v-bind="formItemLayout">
                <a-select v-decoractor="['pinFlag']">
                  <a-select-option value="Y">转加密</a-select-option>
                  <a-select-option value="N">不转加密</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="是否需要签约" v-bind="formItemLayout">
                <a-select v-decoractor="['needSignFlag']">
                  <a-select-option value="Y">是</a-select-option>
                  <a-select-option value="N">否</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="通道交易描述" v-bind="formItemLayout">
                <a-input
                  v-decorator="[
                    'txnName',
                    { rules: [{ required: true, message: '必填' }] },
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row type="flex" justify="center">
            <a-button type="primary" @click="next">下一步</a-button>
            <a-button style="margin-left: 8px" @click="onClose">取消</a-button>
          </a-row>
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="2" tab="交易时间窗口">
        <a-form :form="form">
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="营业开始日期" v-bind="formItemLayout">
                <a-input :disabled="true" v-decorator="['bizStartDate']" />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="交易支持开始时间" v-bind="formItemLayout">
                <a-time-picker
                  v-decorator="[
                    'supportBeginTime',
                    { rules: [{ required: true, message: '必填' }] },
                  ]"
                  :default-open-value="moment('00:00:00', 'HH:mm:ss')"
                  @change="timeChange"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="交易支持截止时间" v-bind="formItemLayout">
                <a-time-picker
                  v-decorator="[
                    'supportEndTime',
                    { rules: [{ required: true, message: '必填' }] },
                  ]"
                  :default-open-value="moment('00:00:00', 'HH:mm:ss')"
                  @change="timeChange"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row type="flex" justify="center">
            <a-button type="primary" @click="pre">上一步</a-button>
            <a-button style="margin-left: 8px" type="primary" @click="next"
              >下一步</a-button
            >
          </a-row>
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="3" tab="交易业务限制">
        <a-form :form="form">
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="单笔最大限额" v-bind="formItemLayout">
                <a-input
                  v-decorator="[
                    'singleLimitMaxAmt',
                    {
                      rules: [
                        { max: 15, message: '不超过15位字符' },
                        {
                          reg: '^[0-9]+(.[0-9]{1,2})?$',
                          message: '请检查格式',
                        },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="单笔最小限额" v-bind="formItemLayout">
                <a-input
                  v-decorator="[
                    'singleLimitMinAmt',
                    {
                      rules: [
                        { max: 15, message: '不超过15位字符' },
                        {
                          reg: '^[0-9]+(.[0-9]{1,2})?$',
                          message: '请检查格式',
                        },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="日累计限额" v-bind="formItemLayout">
                <a-input
                  v-decorator="[
                    'dayLimitAmt',
                    {
                      rules: [
                        { max: 15, message: '不超过15位字符' },
                        {
                          reg: '^[0-9]+(.[0-9]{1,2})?$',
                          message: '请检查格式',
                        },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="日累计限次" v-bind="formItemLayout">
                <a-input
                  v-decorator="[
                    'dayLimitNum',
                    {
                      rules: [
                        { max: 8, message: '不超过8位字符' },
                        { reg: '^[1-9][0-9]{0,7}$', message: '请检查格式' },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="月累计限额" v-bind="formItemLayout">
                <a-input
                  v-decorator="[
                    'monthLimitAmt',
                    {
                      rules: [
                        { max: 15, message: '不超过15位字符' },
                        {
                          reg: '^[0-9]+(.[0-9]{1,2})?$',
                          message: '请检查格式',
                        },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="月累计限次" v-bind="formItemLayout">
                <a-input
                  v-decorator="[
                    'monthLimitNum',
                    {
                      rules: [
                        { max: 8, message: '不超过8位字符' },
                        { reg: '^[1-9][0-9]{0,7}$', message: '请检查格式' },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="单笔退货限额" v-bind="formItemLayout">
                <a-input
                  v-decorator="[
                    'singleRefundLimitAmt',
                    {
                      rules: [
                        { max: 15, message: '不超过15位字符' },
                        {
                          reg: '^[0-9]+(.[0-9]{1,2})?$',
                          message: '请检查格式',
                        },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="单日累计退货限额" v-bind="formItemLayout">
                <a-input
                  v-decorator="[
                    'dayRefundLimitAmt',
                    {
                      rules: [
                        { max: 15, message: '不超过15位字符' },
                        {
                          reg: '^[0-9]+(.[0-9]{1,2})?$',
                          message: '请检查格式',
                        },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row type="flex" justify="center">
            <a-button type="primary" @click="pre">上一步</a-button>
            <a-button style="margin-left: 8px" type="primary" @click="next"
              >下一步</a-button
            >
          </a-row>
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="4" tab="交易费率">
        <a-form :form="form">
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="费率模板代码" v-bind="formItemLayout">
                <a-select
                  v-decoractor="[
                    'feeCd',
                    { rules: [{ required: true, message: '必填' }] },
                  ]"
                >
                  <a-select-option value=""></a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="费率名称" v-bind="formItemLayout">
                <a-input
                  :disabled="true"
                  v-decoractor="[
                    'feeName',
                    { rules: [{ required: true, message: '必填' }] },
                  ]"
                ></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="费率描述" v-bind="formItemLayout">
                <a-input :disabled="true" v-decoractor="['feeDesc']"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="费率名称" v-bind="formItemLayout">
                <a-select
                  v-decoractor="[
                    'feeScene',
                    { rules: [{ required: true, message: '必填' }] },
                  ]"
                >
                  <a-select-option value="0"
                    >单日交易累计金额计费</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <a-table
          row-key="id"
          ref="TableInfo"
          :columns="columns"
          :rowKey="(record) => record.id"
          :dataSource="dataSource"
          :scroll="{ x: 900 }"
          @change="handleTableChange"
        >
        </a-table>
        <a-row type="flex" justify="center">
          <a-button type="primary" @click="pre">上一步</a-button>
          <a-button style="margin-left: 8px" @click="onClose"
            >保存并关闭</a-button
          >
        </a-row>
      </a-tab-pane>
    </a-tabs>

    <div class="drawer-bootom-button">
      <a-button @click="handleSubmit" type="primary" :loading="loading"
        >保存</a-button
      >
      <a-button @click="onClose" style="margin-left: 0.8rem">取消</a-button>
    </div>
  </a-modal>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import moment from "moment";
import AddForm from "../../../system/form/AddForm.vue";
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 12 },
};
export default {
  components: { AddForm },
  name: " PDstTxnAuthCfgEdit",
  props: {
    pDstTxnAuthCfgEditVisiable: {
      default: false,
    },
  },
  data() {
    return {
      formItemLayout,
      form: this.$form.createForm(this),
      roleData: [],
      userId: "",
      loading: false,
      activeKey: "1",
      dataSource: [],
    };
  },
  computed: {
    ...mapState({
      currentUser: (state) => state.account.user,
    }),
    columns() {
      return [
        {
          title: "分段开始值",
          dataIndex: "pStartValue",
          width: 100,
        },
        {
          title: "分段结束值",
          dataIndex: "pEndValue",
          width: 120,
        },
        {
          title: "分段计算方式",
          dataIndex: "pCalType",
          width: 200,
          customRender: (text, row, index) => {
            switch (text) {
              case "1":
                return "按比例";
              case "2":
                return "按固定金额";
              case "3":
                return "按比例+封顶值";
            }
          },
        },
        {
          title: "分段比率",
          dataIndex: "pFeeRate",
          width: 120,
        },
        {
          title: "分段比率封顶值",
          dataIndex: "pFeeRateMax",
          width: 120,
        },
        {
          title: "分段固定值",
          dataIndex: "pValue",
          width: 120,
        },
      ];
    },
  },
  mounted() {
    this.fetch();
  },
  methods: {
    ...mapMutations({
      setUser: "account/setUser",
    }),
    moment,
    onClose() {
      this.loading = false;
      this.form.resetFields();
      this.$emit("close");
    },
    setFormValues({ ...list }) {
      let fields = [
        "channelTxn",
        "supportFlag",
        "intelligentRouteFlag",
        "supportAcctTypeList",
        "txnDelayType",
        "maxSupportNum",
        "msgRegisterFlag",
        "signFlag",
        "pinFlag",
        "needSignFlag",
        "txnName",
      ];
      Object.keys(list).forEach((key) => {
        if (fields.indexOf(key) !== -1) {
          this.form.getFieldDecorator(key);
          let obj = {};
          obj[key] = list[key];
          this.form.setFieldsValue(obj);
        }
      });
    },

    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true;
          let user = this.form.getFieldsValue();
          user.roleId = user.roleId.join(",");
          user.userId = this.userId;
          user.deptId = this.userDept;
          this.$put("user", {
            ...user,
          })
            .then((r) => {
              this.loading = false;
              this.$emit("success");
              // 如果修改用户就是当前登录用户的话，更新其state
              if (user.username === this.currentUser.username) {
                this.$get(`user/${user.username}`).then((r) => {
                  this.setUser(r.data);
                });
              }
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
    handleChange() {},
    timeChange(time, timeString) {
      console.log(time, timeString);
    },
    next() {
      this.activeKey = (Number(this.activeKey) + 1).toString();
    },
    pre() {
      this.activeKey = (Number(this.activeKey) - 1).toString();
    },
    fetch(params = {}) {
      //   this.$get("pDstTxnAuthCfgInfo", {
      //     ...params,
      //   }).then((r) => {
      //     let data = r.data;

      let data = {
        content: [{}],
        last: false,
        totalPages: 234,
        totalElements: 3506,
        first: true,
        numberOfElements: 2,
        sort: [
          {
            direction: "DESC",
            property: "id",
            ignoreCase: false,
            nullHandling: "NATIVE",
            ascending: false,
          },
        ],
        size: 2,
        number: 0,
      };
      this.dataSource = data.content;
      //   });
    },
  },
  watch: {},
};
</script>
